import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { SearchBar } from "weaver-mobile";
import { getMeetingList } from "../../api/index";
import "./index.less";
import Empty from "../Empty";

@withRouter
export default class MeetingSignList extends Component {
  state = {
    pageNo: 1,
    pageSize: 100,
    title: "",
    meetings: [],
    total: -1,
  };

  loadMeetingList() {
    getMeetingList({
      pageNo: this.state.pageNo,
      pageSize: this.state.pageSize,
      title: this.state.title,
    }).then((result) => {
      if (result.ret == 200) {
        this.setState({
          meetings: result.data.data,
          total: result.data.total,
        });
      }
    });
  }

  componentDidMount() {
    document.title = "会议签到";
    this.loadMeetingList();
  }

  handleCardClick(item) {
    this.props.history.push("/meetingSign/" + item.id);
  }

  render() {
    return (
      <div className="history-tidbit">
        <div className="search">
          <SearchBar
            className="search-bar"
            placeholder="请输入会议名称"
            maxLength={20}
            value={this.state.title}
            onChange={(e) => {
              this.setState({
                title: e,
              });
            }}
            onClear={(e) => {
              this.setState(
                {
                  title: "",
                },
                () => {
                  this.loadMeetingList();
                }
              );
            }}
            onSubmit={(e) => {
              this.loadMeetingList();
            }}
          />
        </div>
        <div className="main">
          {this.state.total != 0 ? (
            <div className="cards">
              {this.state.meetings.map((item) => {
                return (
                  <div
                    className="card"
                    key={item.id}
                    onClick={() => {
                      this.handleCardClick(item);
                    }}
                  >
                    <div className="main">
                      <div className="text">
                        <div className="title">{item.title}</div>
                        <div className="content">{item.content}</div>
                      </div>
                      <div className="img">
                        <img src={item.img}></img>
                      </div>
                    </div>
                    <div className="footer">
                      <div className="date">{item.date}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <Empty></Empty>
          )}
        </div>
      </div>
    );
  }
}
